<template>
    <div>
        <el-form-item :prop="item.name || ''" :label="item.label" v-bind="item.formItemProps || {}" ref="el-form-item">
            <div :class="textCss" ><pre>{{svalue}}</pre></div>
        </el-form-item>
    </div>
</template>

<script>

import Select from "../edit/Select";
import TextView from "./TextView"

/**
 * 下拉框的view组件
 * 
 */
export default {
    extends: Select,
    name: "PopoSelectView",
    data(){
        return {
            nullValue: "[未设置]",
            textCss: { "text-viewer-box":true, "null-value": false},
        };
    },
    created(){
        // console.log( "select view complate");
    },
    computed:{
        svalue(){
            if( this.mvalue === null || this.mvalue === undefined){
                this.textCss[ "null-value"] = true;
                return this.nullValue;
            }

            var options_list = this.options;
            if( this.item.defaultOption !== null){
                // 因为下拉框，可能会默认会带一个"全部"的选项，在取label的时候，这个值得去掉
                options_list.shift();
            }
            // console.log( "options_list", options_list);
            var mvalues = Array.isArray( this.mvalue) ? this.mvalue : this.mvalue.split( this.item.valueSplitChar || ",");
            var label = null;
            options_list.forEach( (obj) =>{
                // if( obj.value === this.mvalue){
                if( mvalues.indexOf( obj.value) >= 0 ){
                    label = obj.label;
                }
            });

            if( label){
                this.textCss[ "null-value"] = false;
                return label;
            }else{
                this.textCss[ "null-value"] = true;
                return this.nullValue;
            }
        },
    },
    methods: {
    }
};
</script>

<style scoped lang="scss">
@import "../../css/view_base";
::v-deep{ }

</style>
